<template>
   <div>
      <div class="common-layout">
         <el-config-provider :size="<any>sizes" :locale="locale">
            <el-container>
               <el-aside width="auto">
                  <!-- 导航栏 -->
                  <NavigationList :is-Control="isControl"></NavigationList>
               </el-aside>
               <el-container>
                  <el-header>
                     <div style="width: 100%;display: flex;align-items: center;   border-bottom: 0.1px solid #ccc;">
                        <!-- 面包屑 -->
                        <CrumbsList @change-Control="isControl = $event"></CrumbsList>
                        <!-- 屏幕全屏缩放 -->
                        <ScreenFull></ScreenFull>
                        <!-- 改变字体大小 -->
                        <SizeChange @change-size="size"></SizeChange>
                        <!-- 取色器 -->
                        <div class="demo-color-block" style=" margin-right: 10px;"> <el-color-picker v-model="color1" /></div>
                        <!-- 头像 -->
                        <IconList></IconList>
                        <!-- 国际化中英文切换 -->
                       <SelecTion @set-language="setlanguage"></SelecTion>
                     </div>
                     <!-- 标签页 -->
                     <!-- <el-scrollbar> -->
                     <div class="scrollbar-flex-content">
                        <TagList></TagList>
                     </div>
                     <!-- </el-scrollbar> -->
                  </el-header>
                  <el-main>
                     <RouterView />
                  </el-main>
               </el-container>
            </el-container>
         </el-config-provider>
      </div>
   </div>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import NavigationList from '@/components/navigation/NavigationList.vue'//导航栏
import CrumbsList from '@/components/navigation/CrumbsList.vue'//面包屑
import TagList from '@/components/navigation/TagList.vue'//标签页
import ScreenFull from '@/components/navigation/ScreenFull .vue'//屏幕缩放
import SizeChange from '@/components/navigation/SizeChange.vue'//改变字体大小
import SelecTion from '@/components/navigation/SelecTion.vue'//中英文切换
import IconList from '@/components/navigation/IconList.vue'//中英文切换
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { ref } from 'vue'

const color1 = ref('#409EFF')
const isControl = ref(false)//切换图标方向
const locale=ref(localStorage.getItem('language')=='zn'?zhCn:en)
const sizes = ref(localStorage.getItem('size'))//页面一打开就获得字体大小
const size = (e: string) => {//传过来的size大小赋值
   sizes.value = e
}
function setlanguage(){//子传过来的自定义事件本地是中文就显示zn否则显示英文
   locale.value=localStorage.getItem('language')=='zn'?zhCn:en
}
</script>
<style lang="less" scoped>
.el-header {
   // width: 85vw;
   padding: 0;
   height: 72px;
 

   .scrollbar-flex-content {
      border-bottom: 0.1px solid #ccc;

   }
}

// --el-header-padding

.el-container {
   height: 100vh;
}



.el-sub-menu {
   width: 100%;
}

.example-showcase .el-dropdown-link {
   cursor: pointer;
   color: var(--el-color-primary);
   display: flex;
   align-items: center;
}
.el-main{
//   padding: 0px;
//   margin: 10px;
}

</style>